<template>

    <SysOfficialAdvice @add-official="onAddOfficial" @batch-remove="onBatchRemove"/>

    <Table border :columns="columns" :data="data" @on-selection-change="selection = $event">
        
        <template #status="{ row, index }">
            <DotTag type="primary" v-if="row.state">已发布</DotTag>
            <DotTag type="error" v-else>未发布</DotTag>
        </template>

        <template #content="{row, index}">
            <div v-html="handleContent(row.content)"  v-line-clamp="1"></div>
        </template>

        <template #action="{ row, index }">
            <Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editConfig(row)">修改</Button>
            <Button type="error" icon="ios-remove-circle-outline" size="small" @click="remove(row, index)">移除</Button>
        </template>

    </Table>

    <SysOfficialForm v-model="drawer.state" :title="drawer.title" :row="drawer.row" v-if="drawer.state" />

</template>

<script setup>
import {ref, reactive} from 'vue'
import DotTag from '../components/DotTag.vue'
import SysOfficialAdvice from '../components/sys/SysOfficialAdvice.vue'
import SysOfficialForm from '../components/sys/SysOfficialForm.vue';
import Tips from '../message'; 

const drawer = ref({title: "", state: false});

const columns = reactive([
    {
        type: "selection" ,
        width: 60 
    },
    {
        title: "标题" ,
        key: "name" ,
        width: 200,
    },
    {
        title: "公告内容" ,
        slot: "content" ,
    },
    {
        title: "发布人", 
        key: "author" ,
        width: 150,
    },
    {
        title: "发布时间" ,
        key: "publishTime" ,
        width: 180,
        align: 'center',
    },
    {
        title: "结束时间" ,
        key: "endTime" ,
        width: 180,
        align: 'center',
    },
    {
        title: "发布状态" ,
        slot: "status" ,
        width: 120, 
        align: 'center',
    },
    {
        title: "操作" ,
        slot: "action" ,
        align: 'center',
        width: 180, 
    },
]) ;

// 要修改 data, 可以通过 data.value = ...
const data = ref(reactive([
    {id:1 , name: "网站维护公告", author: "admin", content: "<img src='https://file.iviewui.com/images/image-demo-3.jpg'/><p>系统将于2023/07/30进行维护，届时可能会无法访问该系统，敬请见谅</p>", state: true, publishTime: "2023-07-22 11:22:33", endTime: "2023-08-22 11:22:33"} ,
])) ;

// 定义一个数据、存储复选框选中的所有元素
const selection = ref([]) ; 

// 添加 
function onAddOfficial() {
    drawer.value.title = "添加公告" ;
    drawer.value.state = true ;
    drawer.value.row = {} ;
}
// 批量删除
function onBatchRemove() {
    if (selection.value.length == 0) {
        Tips.warning("请至少选择一个需要删除的公告");
        return ;
    }
    // 获取要删除的所有ID 数据
    let ids = selection.value.map(s => s.id);
    console.log(ids); // 删除
    Tips.success("批量删除成功");
}

// 修改
function editConfig(row) {
    drawer.value.title = "修改公告" ;
    drawer.value.state = true ;
    drawer.value.row = {...row} ;
}

// 删除
function remove(row, index) {
    Tips.confirm("您确定要删除该公告吗?").then(()=> {
        data.value.splice(index, 1);
    })
}

function handleContent(html) {
    // 将html 里面包含的 img 处理掉，否则显示内容会混乱
    let regex = /<img\s+.*?\/>/g ;
    return html.replace(regex, "");
}

</script>